
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>在线五子棋</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style type="text/css">
  * {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
  html, body {
    margin: 0;
    height: 100%;
  }
  .login-container .title-container {
    position: relative;
}
  div.login-container{
        height: 100%;
        width: 100%;
        background-image: url('img/background.png');
        overflow: hidden;
        background-position: 50%;
        background-size: cover;
    }
    div#index{
        position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    }
    form.login-form{
        position: relative;
        width: 470px;
        max-width: 100%;
        padding: 180px 35px 0;
        margin: 0 auto;
        overflow: hidden;
    }
    .login-container .title-container .title{
        font-size: 26px;
        color: #eee;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
    }
    .login-container .el-form-item {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        color: #454545;
    }
    .el-form-item {
        margin-bottom: 22px;
    }
    .el-form-item__content {
        line-height: 40px;
        position: relative;
        font-size: 14px;
    }
    .login-container .svg-container {
        padding: 6px 5px 6px 15px;
        color: #889aa4;
        vertical-align: middle;
        display: inline-block;
    }
    .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
    .login-container .el-input {
        display: inline-block;
        height: 47px;
        width: 85%;
    }
    .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
    }
    .login-container .el-input input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: #fff;
        height: 47px;
        caret-color: #fff;
    }
    .el-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}
.el-button--primary {
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
}
    .login-container .el-form-item {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        color: #454545;
    }
    .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
  </style>
</head>
 
<body>
  <script>
  </script>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">提示  <strong id="counter"></strong></h4>
                </div>
                <div class="modal-body">在这里添加一些文本</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div class="login-container">

        <div id="index">

        </div>
        <form  class="login-form" auto-complete="on">
            <div class="title-container">
                <h3 class="title">在线立体五子棋</h3>
            </div> 
            <div class="el-form-item is-success is-required">
                <div class="el-form-item__content">
                    <span class="svg-container">
                        <svg aria-hidden="true" class="svg-icon">
                            <use xlink:href="#icon-password">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="icon-password">
                                    <path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"></path>
                                </svg>
                            </use>
                        </svg>
                    </span> 
                    <div data-v-788846f1="" class="el-input">
                        <input tabindex="2" type="text" autocomplete="on" placeholder="房间号" id="zoom" class="el-input__inner">
                    </div> 
                </div>
            </div> 
                                                
            <button type="button" class="el-button el-button--primary" style="width: 100%; margin-bottom: 30px;" onclick="enterHouse()"><span>进入房间</span></button> 
            <div class="tips">
                <label style="text-align: right;color: white;float: right;" onClick="createHouse()">创建房间</span> 
            </div>
        </form>
    </div>
  <script src="./three/three.js"></script>
  <script type="text/javascript">

    function setCookie(name,value,time=7){
        var exp = new Date();
        exp.setTime(exp.getTime() + time*3*1000);
        document.cookie = name + "="+ encodeURIComponent(value) +";expires="+ exp.toUTCString();
        console.log(document.cookie);
    }

    function getCookie(name) {
        var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
        if(arr != null)
            return decodeURIComponent(arr[2]);
        return null;
    }
  function showMessage(message, type = 1, time=2000, wait=0) {
    let ele = $("#myModal .modal-body");
    $(ele).html(message);
    let color;
    if(type === 1 ) {
        color = "#3c763d"; //成功
    } else {
        color = "#8a6d3b"; // 警告
    }
    $(ele).css("color",color);
    $("#myModal").modal('show');
    if(!wait){ // 不等待
        setTimeout(function () {
            $("#myModal").modal('hide');
        },time);
        let count = time / 1000;
        $("#counter").html(count);
        let h = setInterval(function () {
            count--;
            if(count >= 0){
                $("#counter").html(count)
            } else {
                clearInterval(h);
            }
        },1000);
    }
}

    var ws; var wsState; var zoomName; var checking = false;
    function initWS(){
        ws =new WebSocket('ws://49.233.221.184:8081');
        ws.onopen=function(){
            checking = false;
        };
        ws.onerror=function(error){
            checking = false;
            showMessage("Can't connect to the server .", 0, 2000,1);
        };
        ws.onmessage=function(message){
                var json=JSON.parse(message.data);
                checking = false;
                console.log(json);
                if (json.type=='ctrl'){
                    switch(json.data){
                        case -5:
                          showMessage('不存在该房间',0,3000);
                          break;
                        case 9:
                          setCookie('zoomOrder',JSON.stringify({order:'enter',data: zoomName}));
                          window.open("./ClientPage.html");  
                            break;
                    }
                }
            }
    }
    initWS();

    function createHouse(){
      setCookie('zoomOrder',JSON.stringify({order:'create'}));
      window.open("./ClientPage.html");  
    }
    function enterHouse(){
        if(checking){
            return;
        }
        checking = true;
        if(ws.readyState !==1){
            showMessage('连接服务器中，请重试', 1, 1000);
            initWS();
            return;
        }
        if($("#zoom").val().trim() === ""){
            showMessage("请输入房间号", 0, 3000);
            checking = false;
            return;
        }
        zoomName = $("#zoom").val().trim();
        ws.send(JSON.stringify({ order: 'check', zoomName: zoomName}))
    }

    var count = 0, mouseX = 0, windowHalfX=null, camera = null,scene=null,particles=null,renderer=null;
    var amountX=50, amountY=50, color=0xffffff, top=350;
    function onDocumentMouseMove(event){
      mouseX = event.clientX - windowHalfX
    }
    function onDocumentTouchStart(event) {
      if (event.touches.length === 1) {
        mouseX = event.touches[0].pageX - windowHalfX
      }
    }
    function onDocumentTouchMove(event) {
      if (event.touches.length === 1) {
        event.preventDefault()
        mouseX = event.touches[0].pageX - windowHalfX
      }
    }
    function init(){
      const SEPARATION = 100
      const SCREEN_WIDTH = window.innerWidth
      const SCREEN_HEIGHT = window.innerHeight
      const container = document.createElement('div')
      windowHalfX = window.innerWidth / 2
      container.style.position = 'relative'
      container.style.top = '350px'
      container.style.height = (SCREEN_HEIGHT - 350) + 'px';
      document.getElementById('index').appendChild(container)

      camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000)
      camera.position.z = 1000

      scene = new THREE.Scene()

      const numParticles = amountX * amountY
      const positions = new Float32Array(numParticles * 3)
      const scales = new Float32Array(numParticles)
      // 初始化粒子位置和大小
      let i = 0
      let j = 0
      for (let ix = 0; ix < amountX; ix++) {
        for (let iy = 0; iy < amountY; iy++) {
          positions[i] = ix * SEPARATION - ((amountX * SEPARATION) / 2)
          positions[i + 1] = 0
          positions[i + 2] = iy * SEPARATION - ((amountY * SEPARATION) / 2)
          scales[j] = 1
          i += 3
          j++
        }
      }

      const geometry = new THREE.BufferGeometry()
      geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3))
      geometry.addAttribute('scale', new THREE.BufferAttribute(scales, 1))
      // 初始化粒子材质
      const material = new THREE.ShaderMaterial({
        uniforms: {
          color: { value: new THREE.Color(color) }
        },
        vertexShader: `
          attribute float scale;
          void main() {
            vec4 mvPosition = modelViewMatrix * vec4( position, 2.0 );
            gl_PointSize = scale * ( 300.0 / - mvPosition.z );
            gl_Position = projectionMatrix * mvPosition;
          }
        `,
        fragmentShader: `
          uniform vec3 color;
          void main() {
            if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;
            gl_FragColor = vec4( color, 1.0 );
          }
        `
      })

      particles = new THREE.Points(geometry, material)
      scene.add(particles)

      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      renderer.setSize(container.clientWidth, container.clientHeight)
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setClearAlpha(0)
      container.appendChild(renderer.domElement)

      window.addEventListener('resize', onWindowResize, { passive: false })
      document.addEventListener('mousemove', onDocumentMouseMove, { passive: false })
      document.addEventListener('touchstart', onDocumentTouchStart, { passive: false })
      document.addEventListener('touchmove', onDocumentTouchMove, { passive: false })
    }
    function render() {
      camera.position.x += (mouseX - camera.position.x) * 0.05
      camera.position.y = 400
      camera.lookAt(scene.position)
      const positions = particles.geometry.attributes.position.array
      const scales = particles.geometry.attributes.scale.array
      // 计算粒子位置及大小
      let i = 0
      let j = 0
      for (let ix = 0; ix < amountX; ix++) {
        for (let iy = 0; iy < amountY; iy++) {
          positions[i + 1] = (Math.sin((ix + count) * 0.3) * 100) + (Math.sin((iy + count) * 0.5) * 100)
          scales[j] = (Math.sin((ix + count) * 0.3) + 1) * 8 + (Math.sin((iy + count) * 0.5) + 1) * 8
          i += 3
          j++
        }
      }
      // 重新渲染粒子
      particles.geometry.attributes.position.needsUpdate = true
      particles.geometry.attributes.scale.needsUpdate = true
      renderer.render(scene, camera)
      count += 0.1
    }
    function animate() {
      requestAnimationFrame(animate)
      render()
    }
    function onWindowResize(){
      windowHalfX = window.innerWidth / 2
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()
      renderer.setSize(window.innerWidth, window.innerHeight)
    }
    init();
    animate();
  </script>
</body>
 
</html>